<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>订单详情</title>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css">
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css?v=4">
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
</head>
<style type="text/css">
.mui-preview-image.mui-fullscreen {position: fixed; z-index: 20; background-color: #000; }
.mui-preview-header, .mui-preview-footer {position: absolute; width: 100%; left: 0; z-index: 10; }
.mui-preview-header {height: 44px; top: 0; }
.mui-preview-footer {height: 50px; bottom: 0px; }
.mui-preview-header .mui-preview-indicator {display: block; line-height: 25px; color: #fff; text-align: center; margin: 15px auto 4; width: 70px; background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px; } 
.mui-preview-image {display: none; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn; animation-name: fadeIn; }
.mui-preview-image.mui-preview-out {background: none; -webkit-animation-name: fadeOut; animation-name: fadeOut; }
.mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {display: none; }
.mui-zoom-scroller {position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; } 
.mui-zoom {-webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.mui-slider .mui-slider-group .mui-slider-item img {width: auto; height: auto; max-width: 100%; max-height: 100%; }
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%; }
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table; }
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell; vertical-align: middle; }
.mui-preview-loading {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; }
.mui-preview-loading.mui-active {display: block; }
.mui-preview-loading .mui-spinner-white {position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; height: 50px; width: 50px; }
.mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; }
@-webkit-keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
@keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
@-webkit-keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
@keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
p img {max-width: 100%; height: auto; }
p{margin: 0;color: #333;height: 23px;}
.orderInfo img{width: 100%;}
.orderStatus p{color: #fff}
.orderInfo p{line-height: 25px;font-size: 14px;}
.orderStatus{height: auto!important}
.rcmdPrdList dl .x{position: absolute;top: 2.5px;right:2.5px;z-index: 9;width: 30px;height: 30px;}
</style>
<script type="text/javascript">
	console.log({{.order}})
</script>
<body class="orderDetail">
	<div class="orderStatus">
		{{if eq .order.status "1"}}
		<p>待付款</p>
		{{else if eq .order.status "2"}}
		<p>待发货</p>
		{{else if eq .order.status "3"}}
		<p>待收货</p>
		{{else if eq .order.status "4"}}
		<p>待评论</p>
		{{else if eq .order.status "5"}}
		<p>完结订单</p>
		{{else if eq .order.status "6"}}
		<p>退款订单</p>
		{{end}}
	</div>
	<div class="orderAdd">
		<dl>
			<dt>收货人：{{.order.name}} <span>{{.order.mobile}}</span></dt>
			<dd>收货地址：{{.order.shen}} {{.order.shi}} {{.order.qu}} {{.order.address}}</dd>
		</dl>
	</div>
	<div class="orderBox">
		<p><i class="iconfont">&#xe75f;</i>{{if .order.gname}}{{.order.gname}}{{else}}{{.system.name}}{{end}}<i class="iconfont">&#xe7bb;</i></p>
		{{range .order.shopcar}}
		<dl class="orderItem goto" href="/mobile/column/product_content?id={{.pid}}">
			<dt class="suiBgImg" style="background-image: url({{.pathname}});"></dt>
			<dd>{{.title}}<span>&yen;{{.price}}</span></dd>
			<dd>规格 : {{.number}}{{.spec}}/箱<br>型号 : {{.model}}<span>
			{{if eq .status "3" "4"}}
			{{if eq .num .sendnum}}
			x{{.num}}
			{{else}}
			实发{{.sendnum}}/{{.num}}
			{{end}}
			{{else}}
			x{{.num}}
			{{end}}{{if eq .spec2 "1"}}件{{else}}箱{{end}}
			</span></dd>
			<dd><!-- <label>官方自营</label> --></dd>
		</dl>
		{{end}}
		<style type="text/css">

		</style>
		<div class="orderInfo">
			<p class="all">订单总价<span>&yen;{{.order.price}}</span></p>
			<p><span>支付明细</span></p>
			{{if ne .order.yid "0"}}
			<p class="coupon">优惠券<span>- &yen; {{.order.offer}}</span></p>
			{{end}}
			{{if ne .order.count "0.00"}}
			<p class="vip">Vip<span>- &yen; {{.order.count}}</span></p>
			{{end}}
			<p class="real">实付<span>&yen;<span>{{.order.money}}</span></span></p>
			{{if eq .order.status "3" "4" "5" "6"}}
			<p><span>发货明细</span></p>
			<p>司机姓名<span>{{.order.drivername}}</span></p>
			<p>司机电话<span><a href="tel:{{.order.drivermobile}}">{{.order.drivermobile}}</a></span></p>
			<img src="{{.order.pathname}}"  data-preview-src="" data-preview-group="1">
			{{end}}
		</div>
		<div class="orderBtn">
			<a href="/mobile/contact_service?id=48"><span>1</span>联系客服</a>
			{{if .order.gname}}
			<a href="tel:{{.order.tel}}"><span>1</span>拨打电话</a>
			{{else}}
			<a href="tel:{{.system.tel}}"><span>1</span>拨打电话</a>
			{{end}}
		</div>
	</div>
	<style type="text/css">
		.rcmdPrdList{
			columns:50vw 2;
		}
	</style>
	<div class="rcmdHd"><span>猜你喜欢</span></div>
	<div class="rcmdPrdList">
		{{range .recommend}}
		<dl class="goto" href="/mobile/column/product_content?id={{.id}}">
			<dt>
				<img src="{{.pathname}}" alt="">
			</dt>
			<dd>
				<p>{{.title}}</p>
				<p>{{if .vprice}}
				<span>&yen; {{.vprice}}</span><s>&yen; {{.price}}</s>
				{{else}}
				<span>&yen; {{.price}}</span>
				{{end}}</p>
				<p>好评率{{.hp}}%</p>
			</dd>
			{{if eq .active 1}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="x">
			{{else if eq .active 2}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="x">
			{{end}}
		</dl>
		{{end}}
	</div>
</body>
</html>
<!-- 请更新sui -->
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js?v2"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.zoom.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.previewimage.js"></script>
{{template "wechat/public/share.html" .}}
<script>
	mui.previewImage();
	mui('body').on('tap','.goto', function(e){
		var h=this.getAttribute("href")
		if(h){
			window.location.href=h
		}
	});
	mui('body').on('tap','a', function(e){
		var h=this.getAttribute("href")
		if(h){
			window.location.href=h
		}
	});
</script>